<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>购物车</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/base.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/common.css" />
		<script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.SuperSlide.2.1.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajax/addShoppingCar.js"></script>
	</head>

	<body>
		<jsp:include page="header.jsp"/>
<!--navbar star-->
		<div class="navbar clearfix">
			<div class="content clearfix">
				<ul>
					<li class="cur"><a href="${pageContext.request.contextPath }/index.jsp">首页</a></li>
					<li><a href="${pageContext.request.contextPath }/special.jsp">专场</a></li>
					<li><a href="${pageContext.request.contextPath }/mall.jsp">商城</a></li>
					<li><a href="${pageContext.request.contextPath }/artist.jsp">艺术家</a></li>
				</ul>
			</div>
		</div>
		<!--navbar end-->
		<!--Main-wrap-->
		<div class="main-wrap graybg">
			<div class="wrapper">
				<div class="shopping-list pt40 pb40">
					<table class="table_1 table_shopping white-box" id="prolist">
						<tr>
							<th width="40%">商品</th>
							<th width="18%">单价(元)</th>
							<th width="14%">数量</th>
							<th width="14%">小计(元)</th>
							<th width="14%">操作</th>
						</tr>
						
					</table>
					<div class="shopping-result white-box mt20 clearfix">
						<a href="${pageContext.request.contextPath }/index.jsp" class="fl fs16 pl10">继续购物>></a>
						<p class="fr">
							<a href="${pageContext.request.contextPath }/jiesuan.jsp" class="fr orange-but fs20">去结算</a>
							<span class="fr pr20 fs14">总计：<em class="orange fs24" id="totalPrice">¥</em></span>
						</p>
					</div>

				</div>
			</div>
		</div>
		<!--/end-->
<jsp:include page="footer.jsp"/>
<script type="text/javascript">
var productlist=cart.getproductlist();//取出购物车商品  
//console.log(productlist);
/*
 * }
 ​​
 id: "A005"
 ​​
 imgname: "5.png"
 ​​
 name: "家"
 ​​
 num: 1
 ​​
 price: "565.0"
 ​​
 qty
 */
//console.log(productlist.length);

	function deletePro(n){
		if(confirm("确定删除该商品吗？")){
			cart.deleteproduct(productlist[n].id);
			$("#prolist").find('tr[id="trbox'+n+'"]').remove();
		} 
	}
	
	let j = productlist.length;
 for(var i = 0;i<j;i++){
		$("#prolist").append("<tr class='ascInfo' id='trbox"+i+"'></tr>");
	}
	var n = 0;
	$('.ascInfo').prepend(function(n){
		 return	'<td>'+
		'<p class="o-goods-info ml20 clearfix pt10 pb10">'+
			'<a href="#" class="fl"><span><img src="${pageContext.request.contextPath }/upload/product_img/'+productlist[n].imgname+'" alt="" width="70px;"height="63px;"></span></a>'+
			'<span class="fl tit mt5 ml10">'+productlist[n].name+'</span>'+
		'</p>'+
		'</td>'+
		'<td>'+productlist[n].price+'</td>'+
		'<td>'+
		'<p class="count clearfix">'+
			'<a href="javascript:" onclick="reducenum('+n+')" class="fl fs30 reduction">-</a>'+
			'<input type="text" value="'+productlist[n].num+'" class="fl fs16" placeholder="1" id="pronumber'+n+'">'+
			'<a href="javascript:" onclick="addnum('+n+')" class="fl fs30 add">+</a>'+
		'</p>'+
		'</td>'+
		'<td><span class="orange" id="littleprice'+n+'" class="littleprice">'+productlist[n].num * productlist[n].price+'</span></td>'+
		'<td>'+
		'<a href="javascript:;" onclick="deletePro('+n+')"><i class="iconfont fs26">&#xe60b;</i></a>'+
		'</td>';
	});
	var totalPrice = 0;
	for(n=0;n<productlist.length;n++){
		totalPrice = totalPrice + productlist[n].num * productlist[n].price;
	}
	$('#totalPrice').html(totalPrice);


	
	function reducenum(n){
		var strpronumber = $('#prolist').find('input[id="pronumber'+n+'"]').val();
		var pn = Number(strpronumber);
		if(pn > 1){
			pn --;
			$('#prolist').find('input[id="pronumber'+n+'"]').val(pn);
		productlist[n].num --;
		var newproductList = cart.updateproductnum(productlist[n].id,productlist[n].num);
		$('#prolist').find('span[id="littleprice'+n+'"]').html(productlist[n].num * productlist[n].price);
		var totalPrice = 0;
		for(n=0;n<productlist.length;n++){
			totalPrice = totalPrice + productlist[n].num * productlist[n].price;
		}
		$('#totalPrice').html(totalPrice);
		}else{
			pn = 1;
		}
	}
	function addnum(n){
		var strpronumber = $('#prolist').find('input[id="pronumber'+n+'"]').val();
		var pn = Number(strpronumber);
		if(pn < Number(productlist[n].qty)){
			pn ++;
			$('#prolist').find('input[id="pronumber'+n+'"]').val(pn);
		productlist[n].num ++;
		cart.updateproductnum(productlist[n].id,productlist[n].num);
		$('#prolist').find('span[id="littleprice'+n+'"]').html(productlist[n].num * productlist[n].price);
		var totalPrice = 0;
		for(n=0;n<productlist.length;n++){
			totalPrice = totalPrice + productlist[n].num * productlist[n].price;
		}
		$('#totalPrice').html(totalPrice);
		}else{
			pn = Number(productlist[n].qty);
			alert("商家囤货不够");
		}
	}

</script>
	</body>

</html>